Maintainable JavaScript — CSS and JavaScript

Spread the love

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at loose coupling.

IE8 allows us to run JavaScript expressions in our CSS code.

This is definitely bad since we don’t want tight coupling between CSS and JavaScript.

We could write something like:

.box {  
  backgroundColor: expression(document.body.backgroundColor);  
}

This is IE8 specific and it introduces tight coupling, so it should never be used.

CSS is reevaluated frequently and so the JavaScript will run frequently, so we shouldn’t put JavaScript code in the CSS.

It’s also hard to debug since the JavaScript code is in the CSS file, so there’s no way to trace them in any browsers.

We can set CSS styles with JavaScript in any browser.

They work well together.

However, changing styles in JavaScript means that JavaScript code has to be run.

So if we have code like:

element.style.color = "green";

element.style.color = "red";  
element.style.left = "10px";  
element.style.top = "200px";  
element.style.visibility = "visible";

then we have to run one or more operations to change the style of one element.

This is also a problem because if we have style problems, we can’t just fiddle with the CSS to fix it.

We have to step through the JavaScript code to find the issue and fix the code.

This is definitely slower than just turning on and off the CSS and changing the values.

Another bad way to change the CSS is to change the cssText property of the element.

For instance, some people may write:

element.style.cssText = "color: green; left: 10px; top: 100px; visibility: hidden";

This is also bad because the styles are all in a string.

Therefore, we can’t just toggle them on and off and changing their values without changing the code and refreshing.

Keeping CSS out of JavaScript means that all the style information lives in the CSS.

So we write something like:

.box {  
  color: red;  
  left: 10px;  
  top: 100px;  
  visibility: visible;  
}

in our CSS files.

This way, we can fiddle with them in the browser dev console instead of changing the code and refreshing.

Also, the coupling is looser since the CSS is self-contained.

In our JavaScript code, we can toggle on the class by writing:

element.className += " box";

or:

element.classList.add("box");

And we can remove them by:

element.classList.remove("box");

CSS class names are the communication mechanism, between CSS and JavaScript.

JavaScript is used for adding and removing class names from elements throughout the lifecycle of the page.

The styles are applied by the classes un the CSS code.

Now we only need to change the CSS instead of changing manipulating styles directly.

We should keep JavaScript out of CSS and CSS out of JavaScript.

This way, we won’t have messy code tightly coupling code that are hard to debug.

By John Au-Yeung